<template>
	<view class="pb">
		<ttBar leftIcon="icon-back" title="我的账号"></ttBar>
		<view class="userCard">

			<avatar ref="avatar" selWidth="200px" selHeight="200px" noTab="true" inner="true" @upload="myUpload" :avatarSrc="userInfo.pic?userInfo.pic:'../../static/userPic.png'"
			 avatarStyle="width: 120upx; height: 120upx; border-radius: 100%;"></avatar>


			<text class="userName">账号：{{userInfo.username}}</text>
		</view>
		<view class="setList">
			<view class="row tapBg" @tap="toPage" data-url="findPass">
				<text class="setLabel">修改密码</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="row tapBg" @tap="toPage" data-url="bindTel">

				<text class="setLabel">换绑手机</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<!-- <view class="btnBox">
			<button class="tapOpt" @tap="logOut">退出登录</button>
		</view> -->


	</view>
</template>

<script>
	import COMM from "@/common/common.js";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import API from "@/common/api.js";
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			ttBar,
			avatar
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			}),
		},
		data() {
			return {
				userId: 123456,
				userName: 'X92023',
				userPic: '',
				userType: 0,
			};
		},
		methods: {
			
			myUpload(rsp) {
				this.userPic = rsp.path;
				uni.showLoading({
					title: '图片上传中',
					mask: false
				});
				
				API.uploadSingleImg(rsp.path, "file").then(upRes => {
					this.$store.dispatch("editUserInfo",{
						userId:this.userInfo.userId,
						pic:upRes.data.data.url
					})
					this.userInfo.pic=upRes.data.data.url
				})
			},
	

		},
		onLoad() {
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.pb {
		width: 100%;
		height: 100%;
	}

	.btnBox {
		position: absolute;
		bottom: 50upx;
		width: 100%;
		left: 0;
		padding: 0 98upx;

		button {
			height: 88rpx;
			background-color: #ffb423;
			border-radius: 44rpx;
			border-radius: 44upx;
			border: none;
			line-height: 88upx;
			color: #FFFFFF;
			font-size: 32upx;
		}

		button:after {
			border: none;
		}
	}

	.userCard {
		padding: 65upx 32upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			margin-bottom: 25upx;
		}

		.userName {
			font-size: 36rpx;
			font-weight: bold;
			color: #202932;
			flex: 1;
		}
	}

	.setList {
		margin-top: 26upx;
		padding: 0 18upx;
		display: flex;
		flex-direction: column;

		.row {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 50upx 40upx 50upx 50upx;
			border-radius: 16upx;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			margin-bottom: 10upx;

			.setLabel {
				font-size: 32rpx;
				font-weight: bold;
				color: #908bad;
				flex: 1;
			}

			.iconfont {
				color: #908bad;
			}
		}
	}
</style>
